<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
    let video = document.querySelector('video');
    let assetURL = '../public/video/frag_bunny.mp4';
    // Need to be specific for Blink regarding codecs
    // ./mp4info frag_bunny.mp4 | grep Codec
    let mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    console.log('支持否?', MediaSource.isTypeSupported(mimeCodec))
    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        let mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
    } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
    }
    function sourceOpen (_) {
        //console.log(this.readyState); // open
        let mediaSource = this;
        let sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
            sourceBuffer.addEventListener('updateend', function (_) {
                mediaSource.endOfStream();
                video.play();
                //console.log(mediaSource.readyState); // ended
            });
            console.log('获取到数据',buf)
            sourceBuffer.appendBuffer(buf);
        });
    }
    function fetchAB (url, cb) {
        let xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
            cb(xhr.response);
        };
        xhr.send();
    }
</script>
</body>
</html>